<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        1111
        <div class="box">2222</div>
        <div>3333</div>
    </div>
    <button>点击删除</button>
    <script>
        // 1.createElement:创建元素
        //    var ele =  document.createElement("div");
        //     // 向元素里添加内容
        //    ele.innerHTML = "标签里的内容";
        //    console.log(ele);
        //    //    把元素添加到指定位置  父元素.appendChild("添加的元素");
        //     //   获取container
        //     var containerEle = document.querySelector(".container");
        //     //   document.body.appendChild(ele);
        //     // containerEle.appendChild(ele);

        //     // innerHTML 后面一定接受的是字符串 , 覆盖之前的内容
        //     // containerEle.innerHTML = "<div>你好</div>";
        //     // appendChild :后面是一个元素对象 ，追加到容器里；
        //     containerEle.appendChild(ele);


        // 2. createTextNode：创建文本节点（了解）;
        // var ele = document.createElement("div");
        // var textNode = document.createTextNode("文本内容");
        // ele.appendChild(textNode);
        // ele.innerText = "文本内容";
        // document.body.appendChild(ele);

        // 3.appendChild：添加元素到最后 ，追加元素再容器后面；
        // var div = document.createElement("div");
        // div.innerText = "我是div";
        // document.querySelector(".container").appendChild(div);

        // 4.添加到某个元素之前:  父级元素.insertBefore('要添加的元素','添加再哪一个元素之前');
        // var div = document.createElement("div");
        // div.innerText = "我是div";
        // var box = document.querySelector(".box");

        // document.querySelector(".container").insertBefore(div,box);

        // 5.removeChild: 父元素.removeChild('要删除的元素') ；删除元素
        // var contanerEle = document.querySelector(".container");
        // var box = document.querySelector(".box");
        // document.querySelector("button").onclick = function () {
        //     contanerEle.removeChild(box);
        // }

        // 6.replaceChild: 父元素.replaceChild('新添加的子元素','需要替换掉的子元素') ；替换子元素
            // var ele = document.createElement("div");
            // ele.innerText = "我是div";
            // var containerEle = document.querySelector(".container");
            // var box = document.querySelector(".box");
            // containerEle.replaceChild(ele,box);
        // 7.复制节点 cloneNode  : 要复制的元素.cloneNode(false)
        // 参数如果是false 只会克隆一层   如果是true 会克隆子元素 默认是false
        // 节点和元素  什么类型？？复杂数据类型--》传址 



        var containerEle = document.querySelector(".container");
        // console.log(containerEle);
        var res =  containerEle.cloneNode(true);
        console.log(res);


        /* 
            元素存在  ----》randerTable   ----》button
           没有渲染，先获取 button --->button ---》[]  123;
           后面调用randerTable
        
        */

        // 练习：通过创建元素节点的方式 来创建table表格

    </script>
</body>

</html>